<template>
  <div>
    <a-table class="EmployingUnitTable" :loading="loading" :pagination="pagination" :rowKey="record=>record.id" :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
      <template slot="title" >
        <TableOperate ref="TableOperate" :operateBtn="selectedRowKeys.length > 0 ? operateBtn : null"
        :searchList="searchListArr" :searchTitle="$t('navigation.employing_unit')"
        @searchFormValue="searchFormValue" :noDate="true"
        @batchOperation="(id)=>changeStatus(selectedRowKeys.join(','), id)"
        />
      </template>
      <template slot="name" slot-scope="text, record">
        <div class="edit">
          <p class="updateText" :record="record">{{text}}</p>
          <p class="update">
            <template v-if="record.status === 'ENABLE'">
              <span @click="editUnit(record)">{{$t('common.compile')}}</span>
              <span @click="addAcct(record, true)">{{$t('acct.add_acct')}}</span>
              <span @click="addchildUnit(record, true)">{{$t('employing_unit.add_sub_unit')}}</span>
            </template>
            <span @click="changeStatus(record.id, record.status === 'DISABLE' ? 'ENABLE' : 'DISABLE')">{{record.status === 'ENABLE'?$t('common.disable'):$t('common.enable')}}</span>
          </p>
        </div>
      </template>
      <template slot="status" slot-scope="text">
        <a-icon :type="text === 'ENABLE' ? 'check-circle': 'close-circle'" :class="text === 'ENABLE'?'green':'grey'"/>
      </template>
    </a-table>
    <add-acct :visible="showAddAcct" :record="record" @close="(type)=>addAcct(null, false, type)"/>
  </div>
</template>
<script>
import TableOperate from '@/components/SearchList/TableOperate'
import AddAcct from '@/components/Config/AddAcct'
import { editList, updateStatus } from '@/api/employingUnit'
import { twoArrCludes } from '@/util/roles'
const columns = [
  {
    title: '单位名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '联系人电话',
    dataIndex: 'contact.telephone',
    key: 'contact.telephone'
  },
  {
    title: '邮箱',
    dataIndex: 'contact.email1',
    key: 'contact.email1'
  },
  {
    title: '职位总数',
    dataIndex: 'positionCount',
    key: 'positionCount'
  },
  {
    title: '投递总数',
    dataIndex: 'applicationCount',
    key: 'applicationCount'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '帐号数量',
    dataIndex: 'userCount',
    key: 'userCount'
  }
]
const operateBtn = [{
  name: 'common.disable',
  id: 'DISABLE'
}, {
  name: 'common.enable',
  id: 'ENABLE'
}]

export default {
  name: 'EmployingUnitTable',
  components: { TableOperate, AddAcct },
  data () {
    return {
      data: [],
      columns,
      selectedRowKeys: [],
      deliveryDateArr: '',
      operateBtn,
      searchListArr: null,
      unitField: {},
      keyword: '',
      showAddAcct: false,
      record: null,
      pagination: {
        total: 0,
        simple: true,
        current: 1,
        pageSize: 15,
        onChange: this.changePage
      }
    }
  },
  props: ['status'],
  watch: {
    status: {
      handler (newValue, oldValue) {
        if (newValue !== oldValue) {
          this.getTreelist()
        }
      },
      immediate: true
    }
  },
  created () {
  },
  methods: {
    twoArrCludes,
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    addAcct (record, flag, type) {
      this.record = record
      if (type) {
        this.getTreelist()
      }
      this.showAddAcct = flag
    },
    changePage (current) {
      this.pagination.current = current
      this.getTreelist()
    },
    async changeStatus (ids, status) {
      this.loading = true
      let params = {
        ids,
        status
      }
      let res = await updateStatus(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.$emit('getCount')
        this.pagination.current = 1
        this.getTreelist()
      } else {
        this.loading = false
        this.$message.error(res.message)
      }
    },
    async getTreelist () {
      this.loading = true
      this.selectedRowKeys = []
      let params = {
        keyword: this.keyword,
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        status: this.status === 'ALL' ? '' : this.status
      }
      let res = await editList(params)
      if (res.code === 200) {
        this.data = res.data.treeList
        this.pagination.total = res.data.total
        // let arrTmp = []
        // arrTmp.push({ key: '全部单位', value: res.data.statistics.ALL, code: 'ALL' })
        // arrTmp.push({ key: '已开通', value: res.data.statistics.ENABLE, code: 'ENABLE' })
        // arrTmp.push({ key: '已停止', value: res.data.statistics.DISABLE, code: 'DISABLE' })
        // this.$emit('setCount', arrTmp)
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    searchFormValue (item) {
      this.keyword = item.keyword
      this.getTreelist()
    },
    clearSearch () {
      this.$refs.TableOperate.clearSearch()
    },
    addchildUnit (record) {
      this.$router.push(`/employingUnit/edit?fid=${record.id}`)
    },
    editUnit (record) {
      this.$router.push(`/employingUnit/edit?id=${record.id}`)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.EmployingUnitTable
  background #fff
  margin-top 12px
  .grey
    color textGrey
  .green
    color lightGreen
  .edit
    display inline-block
    vertical-align middle
    .updateText
        font-weight 600
        margin 0
      .update
        visibility hidden
        margin 6px 0 0
        span
          display inline-block
          cursor pointer
          // border-right 1px solid borderColor
          padding 0
          color var(--blue-500)
          &:first-child
            padding-left 0
          &:last-child
            color errorColor
            &:after
              height 0
          &:after
            content ''
            vertical-align middle
            background borderColor
            display inline-block
            height 14px
            width 1px
            margin-left 4px
  :global(.ant-table-tbody >tr >td)
    padding 7px 16px
    vertical-align top
  :global(.ant-table-thead th)
    padding 0
  :global(.ant-table-thead .ant-table-header-column)
    display inline-block
    width calc(100% - 16px)
    padding 5px 8px
    margin 5px 8px
    border-right 1px solid borderColor
  :global(.ant-table-thead th:first-child .ant-table-header-column)
  :global(.ant-table-thead th:last-child .ant-table-header-column)
    border-right none
  :global(.ant-table-content)
    margin-top 1px
  :global(.ant-table .ant-table-row-indent + .ant-table-row-expand-icon)
    vertical-align top
    margin-top 2px
  // :global(.top)
  //   padding 15px 14px
:global(.ant-table-row:hover)
  .update
    visibility visible
</style>
